<template>
  <div class="shopping">
    <header>
      <div @click="returnPage" class="header_l">
        <i class="iconfont icon-return"></i>
      </div>
      <h1>{{changeTitle}}</h1>
    </header>
    <!-- 下单步骤 -->
    <mu-tabs :value.sync="active" color="#fff" indicator-color="#ff3838" text-color="#333" full-width>
      <mu-tab :disabled="active==1?true:active==2?true:false">1.购物车列表</mu-tab>
      <mu-tab :disabled="active==0?true:active==2?true:false">2.确认订单</mu-tab>
      <mu-tab :disabled="active==0?true:active==1?true:false">3.购买成功</mu-tab>
    </mu-tabs>
    <!-- 第一步 -->
    <div class="demo-text" v-if="active === 0">
      <section v-if="!hasGoods" class="wrapper">
        <div class="empty-cart">
          <div class="iconfont icon-publishgoods_fill"></div>
          <p class="message">没有宝贝哦，不如去添加宝贝</p>
          <ul class="flex">
            <li @click="returnMainPage" class="goShopping">
              去购物
              <i class="iconfont icon-return"></i>
            </li>
            <li class="checkCollect">查看收藏夹</li>
          </ul>
        </div>
      </section>
      <section v-if="hasGoods" class="wrap" style="padding-bottom:80px">
        <ul class="radius10 itemlist">
          <li :ref="'list-'+item.id" v-for="(item,index) in cardShopsList" :key="index" class="new-tbl-type">
            <i @click="removeShopsCart(item.id)" class="iconfont icon-delete"></i>
            <div class="itemlist_l new-tbl-cell">
              <img class="lazy" src="../assets/img/p4.jpg" border="0" title="宣传彩页">
            </div>
            <div class="desc new-tbl-cell" style="padding-left: 5px">
              <h4 style="color:#333">{{item.shoptitle}}</h4>
              <div style="clear:both"> </div>
              <p> 尺寸:A5尺寸（210mm*140mm） <br> 类型:单折页 <br> 数量:1000[125] <br> 配送方式:全国包邮 <br>
              </p>
              <div class="b">
                <em class="price">￥
                  <span>{{item.price}}</span>
                </em>&nbsp;
                <span style="jianju"> x</span>&nbsp;
                <span class="txt">
                  <button @click="changeNum(item.id,true)" type="button" class="decrease">-</button>
                  <input v-model="item.number" class="num" type="text" min="1" max="1000" size="4">
                  <button @click="changeNum(item.id,false)" type="button" class="increase">+</button>
                </span>
              </div>
            </div>
          </li>
        </ul>
      </section>
      <footer v-if="hasGoods" class="toolbar">
        <p>合计:
          <em class="price" id="goods_subtotal">￥
            <span>{{totalPrice}}.00</span>
          </em>
        </p>
        <span @click="goToPay" class="checkOut">结算(
          <em class="num">{{totalNum}}</em> )</span>
      </footer>
    </div>
    <!-- 第二步 -->
    <div class="demo-text" v-if="active === 1">
      <section class="wrap">
        <!-- 已登录-提交订单 -->
        <div :class="[!isLogin?hidden:!showAddress?show:hidden]">
          <!-- 收货人信息 -->
          <section class="order_box padd1 radius10" style="padding-top:0">
            <div class="in">
              <div class="table_box table_box1">
                <dl>
                  <dd style="width:48%;">收货人姓名
                    <span class="f1">{{currentAddress.username}}</span>
                  </dd>
                  <dd class="c999" style="width:52%;">
                    <i class="mobile iconfont icon-shake"></i>
                    {{currentAddress.phone}}
                    <div @click="updateAddress" class="modify radius5">修改</div>
                  </dd>
                </dl>
                <dl>
                  <dd class="w50 b_no">详细地址 {{currentAddress.detail}} </dd>
                </dl>
              </div>
            </div>
          </section>
          <!-- 配送方式 -->
          <div class="blank9"></div>
          <section class="order_box padd1 radius10" style="padding-top:4.8px;padding-bottom:4.8px;">
            <div class="table_box table_box2">
              <!-- 配送方式 -->
              <dl>
                <dd class="dd1">配送方式
                  <span class="span1">必填</span>
                </dd>
                <dd class="dd2" @click="psShow=!psShow">{{psMethod}}</dd>
                <i class="show iconfont icon-unfold"></i>
              </dl>
              <div class="dl_box" :class="[psShow?show:hidden]">
                <p>
                  <label>
                    <input @click="getPsMethod" checked="true" name="shipping" type="radio" class="radio" value="上门取货" style="vertical-align:middle"> 上门取货 [￥
                    <span>0.00</span>]</label>
                </p>
                <p>
                  <label>
                    <input @click="getPsMethod" name="shipping" type="radio" class="radio" value="运费到付" style="vertical-align:middle"> 运费到付 [￥
                    <span>0.00</span>]</label>
                </p>
                <p>
                  <label>
                    <input @click="getPsMethod" name="shipping" type="radio" class="radio" value="顺丰速运" style="vertical-align:middle"> 顺丰速运 [￥
                    <span>15.00</span>]</label>
                </p>
                <p>
                  <label>
                    <input @click="getPsMethod" name="shipping" type="radio" class="radio" value="圆通速递" style="vertical-align:middle"> 圆通速递 [￥
                    <span>5.00</span>]</label>
                </p>
                <p>
                  <label>
                    <input @click="getPsMethod" name="shipping" type="radio" class="radio" value="韵达快递" style="vertical-align:middle"> 韵达快递 [￥
                    <span>15.00</span>]</label>
                </p>
              </div>
              <!-- 支付方式 -->
              <dl>
                <dd class="dd1">支付方式
                  <span class="span1">必填</span>
                </dd>
                <dd class="dd2 selectPayment" @click="zfShow=!zfShow">{{zfMethod}}</dd>
                <i class="show iconfont icon-unfold"></i>
              </dl>
              <div class="dl_box" :class="[zfShow?show:hidden]">
                <p>
                  <label>
                    <input @click="getZfMethod" type="radio" class="radio" name="payment" value="支付宝" checked="" style="vertical-align:middle"> 支付宝 [￥
                    <span>0.00</span>]</label>
                </p>
                <p>
                  <label>
                    <input @click="getZfMethod" type="radio" class="radio" name="payment" value="货到付款" style="vertical-align:middle"> 货到付款 [
                    <span>￥
                      <span>0.00</span>
                    </span>]</label>
                </p>
                <p>
                  <label>
                    <input @click="getZfMethod" type="radio" class="radio" name="payment" value="银行汇款/转帐" style="vertical-align:middle"> 银行汇款/转帐 [￥
                    <span>0.00</span>]</label>
                  <br> 【银行名称 收款人信息：全称 ××× ；帐号或地址 ××× ；开户行 ×××。 注意事项：办理电汇时，请在电汇单“汇款用途”一栏处注明您的订单号。】
                </p>
                <p>
                  <label>
                    <input @click="getZfMethod" type="radio" class="radio" name="payment" value="余额支付" style="vertical-align:middle"> 余额支付 [￥
                    <span>0.00</span>]</label>
                </p>
              </div>
            </div>
          </section>
          <!-- 使用红包 -->
          <div class="blank9"></div>
          <section class="order_box padd1 radius10" style="padding-top:4.8px;padding-bottom:4.8px;">
            <div class="table_box table_box2" style=" margin-bottom:8px">
              <dl>
                <dd class="dd1"> 使用红包 </dd>
                <dd class="dd2" @click="hbShow=!hbShow">￥
                  <span>0.00</span>
                </dd>
                <i class="show iconfont icon-unfold"></i>
              </dl>
              <div class="dl_box" :class="[hbShow?show:hidden]">
              </div>
              <div class="dl_box">
                <dl>
                  <dd class="c333"> 留言备注 </dd>
                  <dd>
                    <input placeholder="请输入订单备注" type="text" size="20">
                  </dd>
                </dl>
              </div>
            </div>
          </section>
          <!-- 商品列表 -->
          <div class="blank9"></div>
          <section class="order_box padd1 radius10" style="padding-top:0;padding-bottom:0;">
            <div class="table_box table_box3">
              <dl>
                <dd>商品列表
                  <span class="modify radius5" style="float:right;" @click="active=0">修改</span>
                </dd>
              </dl>
              <dl v-for="(item,index) in orderShopsList" :key="index">
                <dd class="dd1" style="width:60%;text-align:left">
                  <span style="color: #5498db;">{{item.shoptitle}}</span>
                </dd>
                <dd class="dd2 c999" style="width:10%;text-align:center"> x {{item.number}} </dd>
                <dd class="dd3" style="width:30%;text-align:right"> ￥
                  <span>{{item.total}}.00</span>
                </dd>
              </dl>

              <div>
                <div>
                  <dl>
                    <dd class="c999" style="text-align: right;">
                      该订单完成后，您将获得
                      <font class="f4_b">0</font> 积分 ，以及价值
                      <font class="f4_b">￥
                        <span>0.00</span>
                      </font>的红包。
                      <br> 商品总价:
                      <font class="f4_b">￥
                        <span>2.00</span>
                      </font>

                      <br> 应付款金额:
                      <font class="f4_b">￥
                        <span>2.00</span>
                      </font>
                    </dd>
                  </dl>

                </div>
              </div>
            </div>
          </section>
          <!-- 提交按钮 -->
          <div class="blank9"></div>
          <input @click="submitShopsOrder" type="button" value="提交订单" class="c-btn3">
          <div class="blank9"></div>
        </div>
        <!-- 已登录-配送地址 -->
        <div v-for="( item ,index ) in userAddressList" :key="index">
          <div :class="[!isLogin?hidden:showAddress?show:hidden]" class="order_box padd1 radius10" style="padding-top:0;padding-bottom:0;">
            <div class="table_box2 table_box">
              <div style="padding:8px;">
                <dl>
                  <dd class="dd1">收货人</dd>
                  <dd class="dd2">
                    <input name="consignee" type="text" class="inputBg" v-model="item.username">
                    <span>*</span>
                  </dd>
                </dl>
                <dl>
                  <dd class="dd1">手机号码</dd>
                  <dd class="dd2">
                    <input name="mobile" type="text" class="inputBg" v-model="item.phone">
                    <span>*</span>
                  </dd>
                </dl>
                <dl>
                  <dd class="dd1">配送区域</dd>
                  <dd class="dd2">
                    <!-- 三级联动 -->
                    <select v-model="address.province" name="province" style="border:1px solid #ccc; padding:2px">
                      <option value="请选择省">请选择省</option>
                      <option v-for="(item,index) in provinceList" :key="index" :value="item.value">{{item.text}}</option>
                    </select>
                    <select v-model="address.city" name="city" style="border:1px solid #ccc; padding:2px">
                      <option value="请选择市">请选择市</option>
                      <option v-for="(item,index) in cityList" :key="index" :value="item.value">{{item.text}}</option>
                    </select>
                    <select v-model="address.district" name="district" style="border:1px solid #ccc; padding:2px;">
                      <option value="请选择区">请选择区</option>
                      <option v-for="(item,index) in districtList" :key="index" :value="item.value">{{item.text}}</option>
                    </select>
                    <span>*</span>
                  </dd>
                </dl>
                <dl>
                  <dd class="dd1">详细地址</dd>
                  <dd class="dd2">
                    <input name="address" type="text" class="inputBg" v-model="item.detail">
                    <span>*</span>
                  </dd>
                </dl>
                <dl style="border:none; padding-bottom:0">
                  <dd>
                    <button @click="psToAddress" type="submit" class="c-btn3" name="Submit">配送至这个地址</button>
                  </dd>
                </dl>
              </div>
            </div>
          </div>
        </div>
        <!-- 未登录-去登录 -->
        <div :class="[!isLogin?show:hidden]" class="loginBox">
          <div class="bd">
            <ul>
              <div class="table_box" style="width: 95%;margin: 0 auto">
                <dl>
                  <dd>
                    <input @click="$router.push('/login')" type="button" value="登录会员中心" class="c-btn3">
                  </dd>
                </dl>
                <dl>
                  <dd>
                    <input @click="$router.push('/login')" type="button" value="还没有会员？立即注册" class="c-btn3">
                  </dd>
                </dl>
                <dl>
                  <dd>
                    <input type="button" value="不打算登录，直接购买" class="c-btn3">
                  </dd>
                </dl>
                <div class="hezuo">
                  <p class="t">使用合作账号登录</p>
                  <p class="b">
                    <a><img src="../assets/img/wb.png"></a>
                    <a><img src="../assets/img/zfb.png"></a>
                  </p>
                </div>
              </div>
            </ul>
          </div>
        </div>
      </section>
    </div>
    <!-- 第三步 -->
    <div class="blank9"></div>
    <div class="demo-text" v-if="active === 2">
      <section class="order on">
        <h6 style="text-align:center;line-height:20px;">感谢您在本店购物！您的订单号:
          <font style="color:red">2019052240241</font>
        </h6>
        <table width="90%" align="center" border="0" cellpadding="15" cellspacing="0" style="border:1px solid #ddd; margin:10px auto;" bgcolor="#FFFFFF">
          <tbody>
            <tr>
              <td align="left" style="padding: 5px;line-height: 24px;">您选定的配送方式为:
                <strong>{{psMethod}}</strong><br>您选定的支付方式为:
                <strong>{{zfMethod}}</strong><br>您的应付款金额为:
                <strong>￥
                  <span>{{totalPrice}}.00</span>
                </strong><br>支付宝网站(www.alipay.com) 是国内先进的网上支付平台。<br>支付宝收款接口：在线即可开通，
                <font color="red">
                  <b>零预付，免年费</b>
                </font>，单笔阶梯费率，无流量限制。<br>
                <a>
                  <font color="red">立即在线申请</font>
                </a>
              </td>
            </tr>

            <tr>
              <td align="center">
                <a class="c-btn3">支付宝支付</a>
              </td>
            </tr>
          </tbody>
        </table>
        <p style="text-align:center; margin-bottom:20px;">您可以
          <span style="color:#000;">返回首页</span> 或去
          <span style="color:#000;">用户中心</span>
        </p>
      </section>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapMutations, mapActions } = createNamespacedHelpers('shopping')
import ss from '../Plug/session.js'
import addressdata from '../assets/js/city.data-3.js'
export default {
  data() {
    return {
      active: 0, // tab切换
      activeName: 'current',
      hasGoods: false, // 购物车内是否有商品
      cardShopsList: [],
      totalNum: 0,
      totalPrice: 1,
      psShow: false,
      zfShow: false,
      hbShow: false,
      showAddress: false,
      show: 'shows',
      hidden: 'hidden',
      orderShopsList: [],
      orderObj: {},
      psMethod: '上门取货',
      zfMethod: '支付宝',
      address: {
        username: '',
        phone: '',
        province: '请选择省',
        city: '请选择市',
        district: '请选择区',
        detail: ''
      },
      currentAddress: {
        username: '',
        phone: '',
        detail: ''
      },
      userAddressList: [],
      provinceList: [],
      cityArr: [],
      // cityValue:'',
      // districtList:[],
      userAddress: {},
      isLogin: false //是否登录
    }
  },
  mounted() {
    if (ss.isLogin()) {
      this.isLogin = true
    }
    this.provinceList = addressdata
    this.getData()
  },
  computed: {
    // 三级联动--建议改为用事件，比如change事件
    cityList: function() {
      for (let i = 0; i < this.provinceList.length; i++) {
        if (this.provinceList[i].value == this.address.province) {
          this.address.city = '请选择市'
          this.address.district = '请选择区'
          this.cityArr = this.provinceList[i].children
          return this.provinceList[i].children
        }
      }
    },
    districtList: function() {
      for (let i = 0; i < this.cityArr.length; i++) {
        if (this.cityArr[i].value == this.address.city) {
          this.address.district = '请选择区'
          return this.cityArr[i].children
        }
      }
    },
    changeTitle: function() {
      if (this.active == 0) {
        return '购物车'
      } else if (this.active == 1) {
        return '确认订单'
      } else {
        return '订单提交成功'
      }
    }
  },
  methods: {
    ...mapMutations(['sf']),
    ...mapActions([
      'getShopCard',
      'removeShopsCard',
      'updateShopsNum',
      'submitOrder',
      'postAddress',
      'getAddress',
      'putAddress'
    ]),
    // 修改用户默认收货地址
    updateAddress() {
      this.showAddress = true
      this.getAddress(ss.get().id).then(data => {
        this.userAddressList = data
        console.log(data)
      })
    },
    // 去结算
    goToPay() {
      if (ss.isLogin()) {
        this.isLogin = true
        // 先判断该用户是否有地址，以及默认地址
        this.getAddress(ss.get().id).then(data => {
          console.log(data)
          if (data.length == 0) {
            console.log(data.length)
            this.showAddress = true
          } else {
            for (let i = 0; i < data.length; i++) {
              if (data[i].isdefault == 1) {
                this.currentAddress.username = data[i].username
                this.currentAddress.phone = data[i].phone
                this.currentAddress.detail = data[i].detail
              }
            }
          }
          this.active = 1
        })
      } else {
        this.isLogin = false
        this.active = 1
      }
      this.getShopCard().then(data => {
        this.orderShopsList = data
      })
    },
    // 配送至该地址
    psToAddress() {
      this.active = 1
      if (this.address.username == '') {
        alert('用户名不能为空')
        return
      }
      if (this.address.phone == '') {
        alert('手机号不能为空')
        return
      }
      if (
        this.address.province == '请选择省' ||
        this.address.province == '请选择市'
      ) {
        alert('配送地址不能为空')
        return
      }
      if (this.address.detail == '') {
        alert('详细地址不能为空')
        return
      }
      this.showAddress = false
      // 将用户地址存到本地
      // uid: 用户id
      // username:收件人
      // phone:手机号码
      // province:省
      // city:配送区域
      // district:区
      // detail:详细地址
      // email:邮箱
      // postnumber:邮政编码
      // isdefalut:默认地址为1
      this.userAddress = {
        uid: ss.get().id * 1 || 0,
        username: this.address.username,
        phone: this.address.phone * 1,
        province: this.address.province,
        city: this.address.city,
        district: this.address.district,
        detail: this.address.detail,
        email: '邮箱',
        postnumber: '000000', //建议后台改为字符串形
        isdefault: 1
      }
      this.postAddress(this.userAddress).then(data => {
          console.log(data)
          this.getAddress(ss.get().id).then(data => {
            for (let i = 0; i < data.length; i++) {
              if (data[i].isdefault == 1) {
                this.currentAddress.username = data[i].username
                this.currentAddress.phone = data[i].phone
                this.currentAddress.detail = data[i].detail
                console.log(this.currentAddress)
              }
            }
          })
        })
      // 获取该用户的所有地址
      this.getAddress(ss.get().id).then(data => {
        console.log(data)
        for (let i = 0; i < data.length; i++) {
          // 找到isdefault的值为1的id，修改isdefault的值为0
          if (data[i].isdefault == 1) {
            this.putAddress(data[i].id).then(() => {
              // 将配送地址更新到收货地址上
              this.postAddress(this.userAddress).then(data => {
                console.log(data)
                this.getAddress(ss.get().id).then(data => {
                  for (let i = 0; i < data.length; i++) {
                    if (data[i].isdefault == 1) {
                      this.currentAddress.username = data[i].username
                      this.currentAddress.phone = data[i].phone
                      this.currentAddress.detail = data[i].detail
                      console.log(this.currentAddress)
                    }
                  }
                })
              })
            })
          }
        }
      })
    },
    getPsMethod(e) {
      this.psMethod = e.toElement.defaultValue
      this.psShow = !this.psShow
    },
    getZfMethod(e) {
      this.zfMethod = e.toElement.defaultValue
      this.zfShow = !this.zfShow
    },
    submitShopsOrder() {
      // 提交订单到后台接口
      // number
      // time
      // gootsattr
      // goodsid
      // price
      // goodsnum
      // totalprice
      // status
      // goodsname
      // uid
      let arr = this.orderShopsList
      for (let i = 0; i < arr.length; i++) {
        this.orderObj = {
          number: '2019052240241',
          gootsattr: '',
          goodsid: arr[i].id,
          price: arr[i].price,
          goodsnum: arr[i].number,
          totalprice: arr[i].price * arr[i].number,
          status: 0,
          goodsname: arr[i].shoptitle,
          uid: ss.get().id || 0
        }
        this.submitOrder(this.orderObj).then(() => {
          this.active = 2
        })
      }
    },
    getData() {
      this.totalNum = 0
      this.totalPrice = 1
      this.getShopCard().then(data => {
        this.cardShopsList = data
        for (var i = 0; i < this.cardShopsList.length; i++) {
          this.totalNum += this.cardShopsList[i].number * 1
          this.totalPrice +=
            this.cardShopsList[i].price * this.cardShopsList[i].number
        }
        if (this.cardShopsList.length == 0) {
          this.hasGoods = false
        } else {
          this.hasGoods = true
        }
      })
    },
    changeNum(id, isDecrease) {
      let arr = []
      this.getShopCard().then(data => {
        arr = data.filter(k => {
          return k.id == id
        })
        if (isDecrease) {
          if (arr[0].number > 1) {
            let num = --arr[0].number
            this.updateShopsNum({ id, num }).then(() => {
              this.getData()
            })
          }
        } else {
          let num = ++arr[0].number
          this.updateShopsNum({ id, num }).then(() => {
            this.getData()
          })
        }
      })
    },
    removeShopsCart(id) {
      if (confirm('您确实要把该商品移出购物车吗？')) {
        this.removeShopsCard(id).then(() => {
          this.getData()
        })
      }
    },
    returnPage() {
      this.$router.back(-1)
    },
    returnMainPage() {
      this.$router.push('home')
    }
  }
}
</script>

<style scoped>
/* 第三步 */
td {
  padding: 0;
}
.shows {
  display: block;
}
.hidden {
  display: none;
}
/* 已登录-提交订单 */
.order_box .in {
  color: #333;
  font-size: 12.8px;
  padding: 12.8px 0 0 0;
}
.order_box .in {
  display: block;
  background: url('../assets/img/bg1.png') repeat-x;
  background-size: 38.4px 6.4px;
}
.c999 {
  color: #999;
}
.w50 {
  width: 50%;
}
.order_box .in .f1 {
  font-size: 17.6px;
}
.mobile {
  display: inline-block;
  font-size: 26px;
  vertical-align: sub;
}
.modify {
  background: #5498db;
  color: #fff;
  display: inline-block;
  padding: 0 8px;
  /* float: right;         */
  border-radius: 5px;
}
.blank9 {
  height: 16px;
  line-height: 16px;
  clear: both;
  visibility: hidden;
}
.table_box2 .span1 {
  font-size: 12px;
  background: #ff3838;
  color: #fff;
  display: inline-block;
  padding: 0 3.2px;
  border-radius: 5px;
}
.show {
  position: absolute;
  right: 0;
  top: 7px;
  font-weight: bold;
  color: #666;
}
.table_box2 .dl_box p {
  line-height: 36px;
}
.table_box2 input.radio {
  width: auto;
}
.table_box2 input {
  color: #999;
  text-align: left;
  width: 40%;
  border: none;
  background: #fff;
  padding: 0;
  height: 24px;
}
.f4_b {
  color: #ff3838;
  display: inline-block;
}
.c-btn3 {
  color: #fff;
  border: 0;
  height: 2.5rem;
  line-height: 2.5rem;
  width: 100%;
  -webkit-box-flex: 1;
  display: block;
  -webkit-user-select: none;
  font-size: 0.9rem;
  background: #ff3838;
  text-align: center;
}

/* 确认订单-已登录 */
.order_box {
  background: #fff;
  font-size: 12.8px;
  margin: 0 auto;
  padding: 5px;
}
.padd1 {
  padding: 8px;
}
.order_box .table_box2 dl {
  padding: 0;
  position: relative;
}
.order_box .table_box dl {
  border-bottom: 1px solid #f3f3f3;
}
.table_box dl {
  display: table;
  width: 100%;
}
.table_box2 .dd1 {
  width: 28%;
  vertical-align: middle;
}
.table_box2 .dd2 {
  color: #999;
  font-size: 12.8px;
  text-align: left;
  width: 90%;
  height: 40px;
  line-height: normal;
  vertical-align: middle;
  border: none;
}
.table_box2 input {
  color: #999;
  text-align: left;
  width: 40%;
  border: none;
  background: #fff;
  padding: 0;
  height: 24px;
  outline: none;
}
/* 确认订单-未登录 */
.loginBox {
  margin: 10px auto;
}
.loginBox .bd ul {
  padding: 0px 3.2px;
}
.table_box dl {
  padding: 8px 0;
  display: table;
  width: 100%;
}
.table_box dd {
  display: table-cell;
}
.c-btn3 {
  color: #fff;
  border: 0;
  height: 40px;
  line-height: 40px;
  width: 100%;
  -webkit-box-flex: 1;
  display: block;
  -webkit-user-select: none;
  font-size: 14px;
  background: #ff3838;
  text-align: center;
}
.hezuo .t {
  height: 38px;
  line-height: 38px;
}
.hezuo .b {
  display: block;
}
.hezuo .b a {
  display: inline-block;
  margin: 0 11.2px 8px 0;
}
.hezuo .b img {
  width: 52px;
  height: 52px;
}
/**/
.toolbar {
  background: #fff;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 42px;
  font-size: 12.8px;
  overflow: hidden;
}
.toolbar p {
  width: 55%;
  height: 42px;
  padding-left: 8px;
  display: -webkit-box;
  -webkit-box-align: center;
}
.toolbar .checkOut {
  display: block;
  text-align: center;
  line-height: 42px;
  position: absolute;
  right: 0;
  top: 0;
  width: 40%;
  height: 100%;
  border: 0;
  font-size: 16px;
  border-radius: 1px;
  -webkit-border-radius: 1px;
  color: #fff;
  background: #ff3838;
}
em {
  font-style: normal;
}
.wrap {
  padding: 0;
  padding-top: 16px;
}
.itemlist {
  padding: 12.8px 14.4px;
  border: 1px solid #ddd;
  background: #fff;
}
.radius10 {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
.itemlist li:last-child {
  border-bottom: none;
}
.itemlist li {
  position: relative;
  border-bottom: 1px solid #ddd;
  padding: 5px 0;
}
.itemlist li > i {
  position: absolute;
  top: -7px;
  right: 0;
  font-size: 32px;
  color: #ccc;
}
.new-tbl-type {
  display: table;
  width: 100%;
}
.itemlist li .new-tbl-cell {
  vertical-align: top;
}
.new-tbl-cell {
  display: table-cell;
}
.itemlist .itemlist_l img {
  width: 96px;
  height: 96px;
}
.itemlist li h4 {
  padding-right: 32px;
  height: 35px;
  line-height: 17px;
  overflow: hidden;
}
.itemlist li p {
  color: #999;
  font-size: 12px;
}
.itemlist li .b {
  line-height: 38px;
}
.price {
  color: #ff3838;
  font-size: 16px;
  display: inline-block;
  font-weight: bold;
  font-style: normal;
}
.itemlist .txt {
  display: inline-block;
  vertical-align: middle;
  border: 1px solid #e3e3e3;
  letter-spacing: 0;
  height: 34px;
  line-height: 34px;
  overflow: hidden;
}
.itemlist .txt .increase,
.itemlist .txt .decrease {
  font-style: normal;
  font-size: 24px;
  font-weight: 700;
  border: 0;
  display: inline-block;
  width: 32px;
  height: 100%;
  -webkit-user-select: none;
  background: #fafafa;
}
.itemlist .txt .increase,
.itemlist .txt .decrease,
.itemlist .txt .num {
  float: left;
  text-align: center;
  outline: none;
}
.itemlist .txt .num {
  height: 100%;
  width: 45px;
  border: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  font-weight: 700;
}
/* tab切换 */
.mu-tabs {
  color: #333 !important;
}
.mu-tab {
  height: 40px !important;
}
.mu-tab-active {
  color: #ff3838;
}
/*****************/
.flex .goShopping,
.flex .checkCollect {
  color: #fff;
  height: 40px;
  line-height: 40px;
  text-align: center;
  width: 40%;
  border-radius: 5px;
}
.flex .goShopping {
  background-color: #6bd0a2;
  position: relative;
}
.flex .goShopping .icon-return {
  position: absolute;
  top: 0;
  left: 22px;
}
.flex .checkCollect {
  background-color: #ff3838;
}
.empty-cart .icon-publishgoods_fill {
  margin: 48px 0;
  text-align: center;
  font-size: 100px !important;
  color: #524e4e;
}
.empty-cart p.message {
  font-size: 14px;
  margin-bottom: 30px;
  text-align: center;
}
.empty-cart .flex {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}
header {
  height: 48px;
  background-color: #ff3838;
  position: relative;
  display: block;
}
header .header_l {
  position: absolute;
  top: 0;
  left: 0;
  height: 48px;
  width: 48px;
  line-height: 48px;
  text-align: center;
}
header .header_l i {
  font-size: 26px;
  color: #fff;
  font-weight: bold;
}
header h1 {
  color: #fff;
  font-size: 18px;
  line-height: 48px;
  text-align: center;
  font-weight: normal;
  margin: 0;
}
</style>
